<template>
  <div>
    <el-form-item label="缩略图" prop="smallModelPhoto">
      <el-upload
        action="http://upload-z0.qiniu.com"
        :accept="accept"
        list-type="picture"
        :limit="1"
        :data="uptoken"
        :before-upload="beforeAvatarUpload"
        :on-remove="handleRemoveChange"
        :on-success="handleSuccessChange"
        :file-list="formData.smallModelPhoto"
      >
        <el-button size="mini" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png/gif文件，且单张不超过10M，缩略图只能传一张</div>
      </el-upload>
    </el-form-item>
  </div>
</template>
<script>
// export default {
//   data() {
//     return {
//       accept: 'image/jpeg,image/gif,image/png,image/bmp',
//       formData: {
//         smallModelPhoto: []
//       },
//       uptoken: {
//         token: '',
//         key: ''
//       }
//     }
//   },
//   mounted: function() {
//     var that = this
//     /**
//        * 获取七牛云token
//        */
//     that.getUptoken = function() {
//       that.$http.get('qiniu/getUpToken').then(function(res) {
//         that.uptoken.token = res.data.data.upToken
//       })
//     }
//   },
//   methods: {
//     beforeAvatarUpload(file) {
//       this.uptoken.key = file.name
//       const isLt10M = file.size < 10 * 1024 * 1024
//       if (!isLt10M) {
//         this.$message.error('上传头像图片大小不能超过 10MB!')
//       }
//       return isLt10M
//     },
//     handleRemoveChange(file, fileList) {
//       var filelists = []
//       fileList.forEach(function(elem) {
//         var item = {
//           name: elem.name,
//           url: Config.qiniu.action + elem.name
//         }
//         filelists.push(item)
//       })

//       this.formData.smallModelPhoto = filelists
//     },
//     handleSuccessChange(response, file, fileList) { // 上传成功后在图片框显示图片
//       var filelists = []
//       fileList.forEach(function(elem) {
//         var item = {
//           name: elem.name,
//           url: Config.qiniu.action + elem.name
//         }
//         filelists.push(item)
//       })
//       this.formData.smallModelPhoto = filelists
//     }
//   }
// }
</script>
